import React, { Component } from 'react'
import { LoginWrapper, LoginBox, Input, Button } from './style'
import {connect} from "react-redux";
import { actionCreators } from './store'
import {Redirect} from 'react-router'
class Login extends Component{

  render() {
    const {loginStatus, login} = this.props
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder='用户名' ref={(dom) => {this.account = dom}} />
            <Input placeholder='密码' type='password' ref={(dom) => {this.password = dom}}/>
            <Button onClick={() => login(this.account, this.password)}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      )
    }else {
      return <Redirect to='/' />
    }
  }
}
const mapState = state => ({
  loginStatus: state.getIn(['login','login'])
})
const mapDispatch = dispatch => ({
  login(accountEle, passwordEle) {
    dispatch(actionCreators.login(accountEle.value, passwordEle.value))
  }
})
export default connect(mapState, mapDispatch)(Login)
